<template>
  <div class="q-gutter-xs">
    <q-btn v-if="showAdd" icon="add" no-wrap color="primary" label="新建" @click="add" v-auth="`${modelName}:add`" />
    <slot />
    <q-btn
      no-wrap
      v-if="$q.screen.gt.sm && showImport"
      label="导入"
      icon="mdi-cloud-upload-outline"
      :loading="importing"
      color="primary"
      @click="importExcel"
      v-auth="`${modelName}:import`"
    >
      <q-uploader
        auto-upload
        ref="excelUploader"
        :max-files="1"
        class="hidden"
        :url="importExcelUrlFull"
        field-name="file"
        :headers="headers"
        @uploaded="importedExcel"
      />
    </q-btn>
    <q-btn
      no-wrap
      v-if="$q.screen.gt.sm && showExport"
      :loading="exporting"
      label="导出"
      icon="mdi-cloud-download-outline"
      color="primary"
      @click="exportExcel()"
      v-auth="`${modelName}:export`"
    />
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    selected: {
      type: Array,
      default: () => [],
    },
    showAdd: {
      type: Boolean,
      default: true,
    },
    showDeleteBatch: {
      type: Boolean,
      default: true,
    },
    showImport: {
      type: Boolean,
      default: true,
    },
    showExport: {
      type: Boolean,
      default: true,
    },
    showFull: {
      type: Boolean,
      default: true,
    },
    showGroup: {
      type: Boolean,
      default: true,
    },
    modelName: {
      type: String,
      default: 'empty',
    },
    label: {
      type: String,
      default: '导出',
    },
    table: Object,
    importing: Boolean,
    exporting: Boolean,
    importExcelUrlFull: String,
    columns: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      group: [],
      headers: [{ name: 'Authorization', value: localStorage.Authorization }],
    };
  },
  watch: {
    group() {
      this.$emit('groupChange', this.group);
    },
  },
  computed: {},
  methods: {
    add() {
      this.$emit('add');
    },
    showConfirm() {
      this.$emit('showConfirm');
    },
    importExcel() {
      this.$refs.excelUploader.pickFiles();
    },
    importedExcel() {
      this.$emit('importedExcel');
    },
    exportExcel() {
      this.$emit('exportExcel', this.label);
    },
  },
  created() { },
  mounted() {
    this.columns.forEach(({ name }) => {
      this.group.push(name);
    });
  },
};
</script>
<style lang="stylus"></style>
